<template>
  <div class="containerbox">
    <div class="container">
      <div style="margin-bottom: 20px;">店铺状态 ：{{ ['待审核', '已通过', '已拒绝', '已冻结'][data.state] }}</div>

      <el-descriptions title="我的店铺" border size="mini">
        <el-descriptions-item label="店铺LOGO">
          <el-avatar v-if="state" :size="30" :fit="'fill'" :src="data.shop_head"></el-avatar>
          <el-upload v-else class="avatar-uploader" :action="upload + '/'" :show-file-list="false" :data="upimg"
            :on-success="handleAvatarSuccess" :before-upload="beforeupload">
            <el-avatar v-if="form.shop_head" :size="100" :fit="'fill'" :src="data.shop_head"></el-avatar>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-descriptions-item>

        <el-descriptions-item label="店铺名称">
          <div v-if="state">{{ data.name }}</div>
          <el-input v-else v-model="form.name" placeholder="请输入店铺名称"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="店铺积分">
          <div>{{ data.coupon }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="联系电话">
          <div v-if="state">{{ data.mobile }}</div>
          <el-input v-else v-model="form.mobile" placeholder="请输入联系电话"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="绿色积分">
          <div>{{ data.green }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="资产积分">
          <div>{{ data.asset }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="商家地址">
          <div v-if="state">{{ data.province }}{{ data.city }}{{ data.area }}{{ data.address }}</div>
          <el-select v-if="!state" v-model="form.province" @change="provincechange" placeholder="请选择省" size="small"
            class="mr10">
            <el-option v-for="(item, index) in provincelist" :key="item.name" :label="item.name"
              :value="item.name"></el-option>
          </el-select>
          <el-select v-if="!state" v-model="form.city" @change="citychange" placeholder="请选择市" size="small"
            class="mr10">
            <el-option v-for="(item, index) in citylist" :key="item.name" :label="item.name"
              :value="item.name"></el-option>
          </el-select>
          <el-select v-if="!state" v-model="form.area" placeholder="请选择区" size="small" class="mr10">
            <el-option v-for="(item, index) in arealist" :key="item.name" :label="item.name"
              :value="item.name"></el-option>
          </el-select>

          <el-input v-if="!state" v-model="form.address" placeholder="请输入详细地址"></el-input>
        </el-descriptions-item>
        <!-- <el-descriptions-item label="市">
          <div v-if="state"></div>

        </el-descriptions-item>
        <el-descriptions-item label="区">
          <div v-if="state"></div>

        </el-descriptions-item>
        <el-descriptions-item label="详细地址">
          <div v-if="state">{{ data.address }}</div>
        </el-descriptions-item> -->

        <el-descriptions-item label="开店时间">
          <div v-if="state">{{ form.start_time }}-{{ form.end_time }}</div>
          <el-time-select v-if="!state" placeholder="起始时间" v-model="form.start_time" :picker-options="{
            start: '00:00',
            step: '00:10',
            end: '23:50'
          }"> </el-time-select>
          <el-time-select v-if="!state" placeholder="结束时间" v-model="form.end_time" :picker-options="{
            start: '00:30',
            step: '00:10',
            end: '23:50',
            minTime: form.start_time
          }">
          </el-time-select>
        </el-descriptions-item>
        <el-descriptions-item label="申请类型">{{ data.types == 0 ? '个人' : '企业' }}</el-descriptions-item>
        <el-descriptions-item label="商家类型">{{ data.code == 0 ? '线上商家' : '线下商家' }}</el-descriptions-item>
        <el-descriptions-item label="店铺类型">{{ data.shop_classname }}</el-descriptions-item>
        <el-descriptions-item label="店铺介绍">

          <div v-if="state">{{ data.introduce }}</div>
          <el-input v-else v-model="form.introduce" placeholder="请输入店铺介绍"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="经营范围">{{ data.trade }}</el-descriptions-item>
        <el-descriptions-item label="企业名称" v-if="data.types == 1">{{ data.enterprise }}</el-descriptions-item>
        <el-descriptions-item label="营业执照号码" v-if="data.types == 1">{{ data.trade_code }}</el-descriptions-item>
        <!-- <el-descriptions-item label="营业执照">

        </el-descriptions-item> -->

      </el-descriptions>
      <div>
        <div style="color:#000;font-weight: bold;">营业执照:</div>
        <img :src="data.license" style="width: 200px;height:200px;" alt="">
      </div>
      <div v-if="data.code == 1">
        <div v-if="state" style="color:#606266;">
          轮播图:<div><img :src="items" style="width: 200px;height:200px;" alt="" v-for="(items, index) in data.img"
              :key="index"></div>
        </div>
        <div v-else>
          轮播图:<el-upload :action="upload + '/'" list-type="picture-card" :on-preview="handlePictureCardPreview"
            :before-upload="beforeAvatarUpload" :on-success="someSuccess" :data="upimg" :limit="6" :file-list="filelist"
            :on-remove="handleRemove">
            <i class="el-icon-plus" style="line-height: 90px;text-align: center;"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible"><img width="100%" height="200" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </div>
      </div>
      <div style="margin-bottom: 20px">
        <div style="color:#606266;margin-top: 10px;">商户详情:</div>
        <my-editor v-if="!state" @getContent="getContent" :content="form.details" ref="editor"></my-editor>
        <div v-else v-html="form.details"></div>
      </div>
      <div v-if="state">
        <el-button type="primary" @click="state = false" class="mr10" size="small">修改</el-button>
      </div>
      <div v-if="!state">
        <el-button type="primary" @click="state = true" class="mr10" size="small">取消</el-button>
        <el-button type="primary" @click="submit" class="mr10" size="small">保存</el-button>
      </div>

    </div>
  </div>
</template>


<script>
import provinces from '@/assets/JSON/provinces.json'
import citys from '@/assets/JSON/cities.json'
import areas from '@/assets/JSON/areas.json'
import MyEditor from '@/components/MyEditor.vue'
export default {
  components: { MyEditor },
  data() {
    return {
      code: 0,
      form: {},
      order_logistics: '',
      order_waybill: '',
      shopping_list: [],
      id: 0,
      data: {},
      filelist: [],
      state: true,
      provincelist: provinces,
      citylist: [],
      arealist: [],
      province: '',
      dialogImageUrl: '',
      dialogVisible: false,
      area: '',
      city: '',
      upimg: {
        token: '',
        key: new Date().valueOf()
      },
      upload: '',
      url: '',
    };
  },
  created() {
    this.getToken().then(res => {
      this.upimg.token = res.data.token
      this.url = res.data.url
      this.upload = res.data.upload
    },
      function () {
        console.log('请求失败处理');
      }
    )
    this.getdata()
  },
  methods: {
    getContent(e) {
      console.log('editor', e)
      this.form.details = e
    },

    evalImg(img) {
      let imgs = eval('(' + img + ')')
      console.log(imgs)
      return imgs
    },
    // 上传图片
    handleAvatarSuccess(res, file) {
      this.form.shop_head = this.url + res.key;
    },
    beforeupload(file) {
      if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
        this.$message.error('上传头像图片只能是 JPG、PNG 格式!');
        return false;
      }
      if (file.size / 1024 / 1024 > 1) {
        this.$message.error('上传图标大小不能超过 1M!');
        return false;
      }
      let types = file.name.split('.')//获取图片格式
      this.upimg.key = this.templatename + '/home/' + new Date().valueOf() + '.' + types[types.length - 1];
    },
    //轮播+
    handlePictureCardPreview(res, file) {
      this.dialogImageUrl = res.url;
      this.dialogVisible = true;
    },

    handleRemove(res, file) {
      console.log(res, file)
      this.data.img.forEach((item, index) => {
        if (item == res.name) {
          console.log(index)
          this.form.img.splice(index, 1)
        }
      })
    },
    beforeAvatarUpload(file) {
      if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'video/mp4') {
        this.$message.error('上传头像图片只能是 JPG、PNG 格式!');
        return false;
      }
      let types = file.name.split('.')//获取视频格式
      this.upimg.key = this.templatename + '/home/' + new Date().valueOf() + '.' + types[types.length - 1];
    },
    someSuccess(res, file) {
      this.filelist = []
      console.log(this.form.img, res)
      if(!this.form.img){
        this.form.img = []
      }
      this.form.img = []
      this.form.img.push(this.url + res.key);
      this.form.img.forEach(item => {
        this.filelist.push({
          name: item,
          url: item
        })
      })

      console.log(this.filelist, this.form.img)

    },
    //省
    provincechange(e) {
      let code = this.provincelist.filter(item => {
        return item.name == e
      })[0].code
      this.citylist = citys.filter(item => {
        return item.provinceCode == code
      })
      this.arealist = []
      this.form.city = ''
      this.form.area = ''
    },
    citychange(e) {
      let code = this.citylist.filter(item => {
        return item.name == e
      })[0].code
      this.arealist = areas.filter(item => {
        return item.cityCode == code
      })
      this.form.area = ''
    },
    getdata() {
      this.request('business/modify_info/', 'get', {}).then(res => {
        // console.log(res)
        this.data = res.data
        this.form = res.data
        this.data['shop_classname'] = res.data.shop_class.name
        this.form['shop_classname'] = res.data.shop_class.name
        if(res.data.img_info){
          this.data.license = JSON.parse(res.data.img_info).license_copy

        }
        if (res.data.img == "") {
          this.form.img = []
          this.data.img = []
        } else {
          let imglist = JSON.parse( res.data.img )
          this.form.img = imglist
          this.data.img = imglist
          console.log(imglist)
          this.filelist = imglist.map(item => {
            return {
              name: item,
              url: item
            }
          })
        }
      })
    },

    submit() {
      let that = this
      this.$address(this.form.province + this.form.city + this.form.area + this.form.address).then(ress => {
        console.log(ress)

        if (ress.status == '1') {
          const address = ress.geocodes[0].location.split(",");
          console.log(address)
          that.form.latitude = Number(address[0])
          that.form.longitude = Number(address[1])
          this.form.img = JSON.stringify(this.form.img)
          console.log(this.form)
          that.request('business/modify_info/', 'post', this.form).then(res => {
            if (res.errno == 0) {
              this.getdata()
              this.$message.success(res.errmsg);
              setTimeout(function () {
                that.state = true
              }, 500);
            } else {
              this.$message.error(res.errmsg)
            }
          })
        }

      })

    }

  },

}
</script>

<style scoped="scoped">
.containerbox {
  padding: 20px;
}

.goodslist {
  height: 200px;
  /* background-color: snow; */
  display: flex;
  justify-content: flex-start;
  /* align-items: center; */
  width: 100%;

}

.goodslist img {
  width: 100px;
  height: 100px;
  margin-right: 20px;
}

.goodsdetail div {
  margin: 10px 0;
}

.submt {

  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}
</style>
